<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>发微博</title>
    <!-- 引入Element UI的CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css"/>
    <style>
        body {
            background-image: url('./gd.jpg'); /* 替换为实际背景图片URL */
            font-family: 'Arial', sans-serif; /* 统一字体 */
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
        }

        #app {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f4f4f4;
        }

        .container {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            width: 400px;
            max-width: 100%;
            text-align: center; /* 居中文本 */
        }

        .form-container {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .form-container h1 {
            margin-bottom: 20px;
            font-size: 24px;
            color: #333;
        }

        .el-form {
            width: 100%;
        }

        .el-input__inner {
            border-radius: 4px;
            border-color: #dcdfe6;
            transition: all 0.3s;
            padding: 10px; /* 调整内边距 */
        }

        .el-input__inner:focus {
            border-color: #409eff;
        }

        .el-button--primary {
            width: 100%;
            margin-top: 10px;
            border-radius: 4px;
            transition: all 0.3s;
            padding: 10px; /* 调整内边距 */
        }

        .el-button--primary:hover {
            background-color: #409eff;
            border-color: #409eff;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="container">
        <div class="form-container">
            <h1>发微博</h1>
            <el-form label-position="left" label-width="80px">
                <el-form-item label="内容">
                    <el-input type="textarea" :rows="4" placeholder="说点儿啥..." v-model="weibo.content"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="insert()">发微博</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</div>

<!-- 引入Vue和Element UI的JavaScript -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.21.1/axios.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                weibo: { content: "" }
            }
        },
        methods: {
            insert() {
                axios.post("/v1/weibo/insert", v.weibo)
                    .then(function (response) {
                        if (response.data === 1) {
                            location.href = "/";
                        } else {
                            alert("请先登录!");
                            location.href = "/login.html";
                        }
                    })
                    .catch(function (error) {
                        console.error("请求失败:", error);
                        alert("发送失败，请检查网络或稍后再试！");
                    });
            }
        }
    });
</script>
</body>
</html>
